<script setup>
import { CircleCheck, User, Lock, Message, Key } from '@element-plus/icons-vue'
import { ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { useRegisterService, useLoginService, useGetUserIdService, useSendVerificationCode } from '@/api/user'
import { useUserStore } from '@/stores'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()
const router = useRouter()

// 页面状态控制
const isAnimated = ref(false) // 标记是否翻页 (true:登录注册页 false:主页)
const isLogin = ref(false)    // 标记是否登录 (true:登录页 false:注册页)
const isMail = ref(false)     // 标记是否使用邮箱登录
const isPageTransitioning = ref(false) // 页面过渡动画状态
const isSubmitting = ref(false) // 表单提交状态

// 用户信息表单
const formModel = ref({
  username: '',
  email: '',
  code: '',
  password: '',
  repassword: '',
  loginType: isMail.value ? 'email_password' : 'username_password'
})

// 表单引用
const form = ref()

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 1, max: 10, message: '请输入长度为1-10的字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱号', trigger: 'blur' },
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: '请输入正确的邮箱号',
      trigger: 'blur'
    }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { min: 6, max: 6, message: '请输入6位数字验证码', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max:12, message: '请输入6-12位密码', trigger: 'blur' } 
  ],
  repassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {   
        if (value !== formModel.value.password) {       
          callback(new Error('两次输入密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 粒子背景相关
const particles = ref([])
const particleCount = 50
const particleColors = ['#5171f2', '#42b9f5', '#64d7d6', '#a5e1ad']

// 初始化粒子
onMounted(() => {
  for (let i = 0; i < particleCount; i++) {
    particles.value.push({
      x: Math.random() * 100,
      y: Math.random() * 100,
      size: Math.random() * 5 + 2,
      speedX: Math.random() * 0.2 - 0.1,
      speedY: Math.random() * 0.2 - 0.1,
      color: particleColors[Math.floor(Math.random() * particleColors.length)],
      opacity: Math.random() * 0.5 + 0.1
    })
  }
  
  animateParticles()
})

// 粒子动画
let animationId = null
const animateParticles = () => {
  particles.value.forEach(particle => {
    particle.x += particle.speedX
    particle.y += particle.speedY
    
    if (particle.x < 0) particle.x = 100
    if (particle.x > 100) particle.x = 0
    if (particle.y < 0) particle.y = 100
    if (particle.y > 100) particle.y = 0
  })
  
  animationId = requestAnimationFrame(animateParticles)
}

// 切换页面处理函数
const switchPage = (goToLogin = false) => {
  isPageTransitioning.value = true
  setTimeout(() => {
    isLogin.value = goToLogin
    isPageTransitioning.value = false
  }, 400)
}

// 主页和登录/注册页面切换
const toggleMainPage = () => {
  isAnimated.value = !isAnimated.value
}

// 注册点击事件
const register = async () => {
  try {
    await form.value.validate()
    isSubmitting.value = true
    
    const res = await useRegisterService(formModel.value)
    if (res.data.status === 1) {
      ElMessage.error(res.data.message)
    } else {
      ElMessage.success('注册成功')
      switchPage(true)
    }
  } catch (error) {
    console.error('注册失败:', error)
  } finally {
    isSubmitting.value = false
  }
}

// 登录点击事件
const login = async () => {
  try {
    await form.value.validate()
    isSubmitting.value = true
    
    const res = await useLoginService(formModel.value)
    if (res.data.status === 1) {
      ElMessage.error(res.data.message)
    } else {
      const userId = await useGetUserIdService(formModel.value)
      if (userId.data.status === 1) {
        return ElMessage.error(userId.data.message)
      }
      console.log('登录获取用户名！！！')
      console.log('res.data.username:', res.data.username)
      
      // 保存登录信息
      userStore.setToken(res.data.token)
      userStore.setUserId(userId.data.userId)
      // 优先使用服务器返回的用户名，如果没有则使用表单中的用户名
      if (res.data.username) {
        userStore.setUsername(res.data.username)
        console.log('使用服务器返回的用户名:', res.data.username)
      } else {
        userStore.setUsername(formModel.value.username)
        console.log('使用表单输入的用户名:', formModel.value.username)
      }
      
      // 登录成功动画
      ElMessage.success('登录成功')
      
      // 使用延迟跳转，给用户反馈时间
      setTimeout(() => {
        router.push('/layout')
      }, 800)
    }
  } catch (error) {
    console.error('登录失败:', error)
  } finally {
    isSubmitting.value = false
  }
}

// 监听登录方式变化，重置表单
watch([isLogin, isMail], () => {
  formModel.value = {
    username: '',
    email: '',
    code: '',
    password: '',
    repassword: '',
    loginType: isMail.value ? 'email_password' : 'username_password'
  }
})

// 验证码发送相关
const defaultSecond = 60
const second = ref(defaultSecond)
let timeId = 0
const isBtnDown = ref(false)

// 发送验证码
const sendCode = async () => {
  const res = await useSendVerificationCode(formModel.value)
  if (res.data.status === 0) {
    ElMessage.success('验证码发送成功')
    
    // 开始倒计时
    isBtnDown.value = true
    timeId = setInterval(() => {
      second.value--
      if (second.value <= 0) {
        clearInterval(timeId)
        second.value = defaultSecond
        isBtnDown.value = false
      }
    }, 1000)
  }
}

// 组件卸载前清除定时器和动画
onUnmounted(() => {
  if (timeId) clearInterval(timeId)
  if (animationId) cancelAnimationFrame(animationId)
})
</script>

<template>
  <div class="login-page">
    <!-- 粒子背景 -->
    <div class="particles-container">
      <div 
        v-for="(particle, index) in particles" 
        :key="index" 
        class="particle"
        :style="{
          left: `${particle.x}%`,
          top: `${particle.y}%`,
          width: `${particle.size}px`,
          height: `${particle.size}px`,
          backgroundColor: particle.color,
          opacity: particle.opacity
        }"
      ></div>
    </div>

    <!-- 装饰元素 -->
    <div class="decoration-circles">
      <div class="circle circle-1"></div>
      <div class="circle circle-2"></div>
      <div class="circle circle-3"></div>
    </div>

    <!-- 顶部导航栏 -->
    <div class="header">
      <div class="header-logo">
        <el-icon class="logo"><CircleCheck /></el-icon>
        <span class="sitename">ToDo</span>
      </div>
      <div v-if="isAnimated" class="back-btn" @click="toggleMainPage">
        <span>返回主页</span>
        <span class="btn-arrow">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M19 12H5M12 19l-7-7 7-7"/>
          </svg>
        </span>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div :class="['main-container', { 'slide-left': isAnimated }]">
      <!-- 首页内容 -->
      <div class="home-section">
        <div class="content-wrapper">
          <h1 class="title">达成更多，成就自我</h1>
          <p class="slogan">简单好用的时间管理助手，帮你高效完成任务，让工作生活井井有条，全球千万用户的共同选择</p>
          <div class="button-group">
            <el-button @click="isLogin = true; toggleMainPage()" class="btn-primary login-btn" type="primary" round>
              <span class="btn-text">登录</span>
              <span class="btn-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M15 12H3"/>
                </svg>
              </span>
            </el-button>
            <el-button @click="isLogin = false; toggleMainPage()" class="btn-primary register-btn" type="primary" round>
              <span class="btn-text">注册</span>
              <span class="btn-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                  <circle cx="8.5" cy="7" r="4"/>
                  <line x1="20" y1="8" x2="20" y2="14"/>
                  <line x1="23" y1="11" x2="17" y2="11"/>
                </svg>
              </span>
            </el-button>
          </div>
          
          <!-- 波浪装饰 -->
          <div class="wave-container">
            <div class="wave wave1"></div>
            <div class="wave wave2"></div>
          </div>
        </div>
      </div>
      
      <!-- 登录/注册区域 -->
      <div class="auth-section">
        <div class="auth-container" :class="{ 'fade-out': isPageTransitioning }">
          <!-- 登录表单 -->
          <div v-if="isLogin" class="auth-form login-form">
            <div class="form-header">
              <h1 class="form-title">登录</h1>
              <p class="form-subtitle">欢迎回来，请登录您的账户</p>
            </div>
            
            <el-form autocomplete="off" :model="formModel" :rules="rules" ref="form">
              <!-- 用户名密码登录 -->
              <transition name="fade-slide" mode="out-in">
                <div v-if="!isMail" key="username-login" class="form-content">
                  <div class="input-group">
                    <label class="input-label">用户名</label>
                    <el-form-item prop="username">
                      <el-input 
                        v-model.trim="formModel.username" 
                        :prefix-icon="User" 
                        placeholder="请输入你的用户名"
                      />
                    </el-form-item>
                  </div>
                  
                  <div class="input-group">
                    <label class="input-label">密码</label>
                    <el-form-item prop="password">
                      <el-input 
                        v-model.trim="formModel.password" 
                        type="password" 
                        :prefix-icon="Lock" 
                        placeholder="请输入你的密码"
                      />
                    </el-form-item>
                  </div>
                </div>
                
                <!-- 邮箱验证码登录 -->
                <div v-else key="email-login" class="form-content">
                  <div class="input-group">
                    <label class="input-label">邮箱</label>
                    <el-form-item prop="email">
                      <el-input 
                        v-model.trim="formModel.email" 
                        :prefix-icon="Message" 
                        placeholder="请输入你的邮箱"
                      />
                    </el-form-item>
                  </div>

                  <div class="input-group">
                    <label class="input-label">用户名</label>
                    <el-form-item prop="username">
                      <el-input 
                        v-model.trim="formModel.username" 
                        :prefix-icon="User" 
                        placeholder="请输入你的用户名"
                      />
                    </el-form-item>
                  </div>
                  
                  <div class="input-group">
                    <label class="input-label">验证码</label>
                    <el-form-item prop="code" class="code-input">
                      <el-input 
                        v-model.trim="formModel.code" 
                        :prefix-icon="Key" 
                        placeholder="请输入验证码"
                      />
                      <el-button 
                        class="code-btn" 
                        @click="sendCode" 
                        :disabled="isBtnDown"
                        :class="{ 'counting': isBtnDown }"
                      >
                        {{ defaultSecond === second ? '发送验证码' : `${second}s` }}
                      </el-button>
                    </el-form-item>
                  </div>
                </div>
              </transition>
              
              <el-form-item>
                <el-button 
                  @click="login" 
                  class="submit-btn" 
                  type="primary" 
                  round
                  :loading="isSubmitting"
                >
                  <span v-if="!isSubmitting">登录</span>
                  <span v-else>正在登录...</span>
                </el-button>
              </el-form-item>
            </el-form>
            
            <div class="form-actions">
              <div class="login-method" @click="isMail = !isMail">
                <span class="action-icon">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                  </svg>
                </span>
                {{ isMail ? '使用用户名密码登录' : '使用邮箱验证码登录' }}
              </div>
              <div class="switch-auth" @click="switchPage(false)">
                还未注册？<span>点我注册</span>
                <span class="action-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M5 12h14M12 5l7 7-7 7"/>
                  </svg>
                </span>
              </div>
            </div>
          </div>
          
          <!-- 注册表单 -->
          <div v-else class="auth-form register-form">
            <div class="form-header">
              <h1 class="form-title">注册</h1>
              <p class="form-subtitle">创建账户，开始您的任务之旅</p>
            </div>
            
            <el-form autocomplete="off" :model="formModel" :rules="rules" ref="form">
              <div class="form-content">
                <div class="input-group">
                  <label class="input-label">用户名</label>
                  <el-form-item prop="username">
                    <el-input 
                      v-model.trim="formModel.username" 
                      :prefix-icon="User" 
                      placeholder="请输入你的用户名"
                    />
                  </el-form-item>
                </div>
                
                <div class="input-group">
                  <label class="input-label">邮箱</label>
                  <el-form-item prop="email">
                    <el-input 
                      v-model.trim="formModel.email" 
                      :prefix-icon="Message" 
                      placeholder="请输入你的邮箱"
                    />
                  </el-form-item>
                </div>
                
                <div class="input-group">
                  <label class="input-label">密码</label>
                  <el-form-item prop="password">
                    <el-input 
                      v-model.trim="formModel.password" 
                      type="password" 
                      :prefix-icon="Lock" 
                      placeholder="请输入你的密码"
                    />
                  </el-form-item>
                </div>
                
                <div class="input-group">
                  <label class="input-label">确认密码</label>
                  <el-form-item prop="repassword">
                    <el-input 
                      v-model.trim="formModel.repassword" 
                      type="password" 
                      :prefix-icon="Lock" 
                      placeholder="请确认你的密码"
                    />
                  </el-form-item>
                </div>
              </div>
              
              <el-form-item>
                <el-button 
                  @click="register" 
                  class="submit-btn" 
                  type="primary" 
                  round
                  :loading="isSubmitting"
                >
                  <span v-if="!isSubmitting">注册</span>
                  <span v-else>正在注册...</span>
                </el-button>
              </el-form-item>
            </el-form>
            
            <div class="form-actions">
              <div class="switch-auth" @click="switchPage(true)">
                已有账号？<span>点我登录</span>
                <span class="action-arrow">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M5 12h14M12 5l7 7-7 7"/>
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login-page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f7ff 50%, #f5fbff 100%);
  
  // 粒子背景
  .particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    
    .particle {
      position: absolute;
      border-radius: 50%;
      transition: opacity 0.3s ease;
    }
  }
  
  // 装饰圆圈
  .decoration-circles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    
    .circle {
      position: absolute;
      border-radius: 50%;
      
      &.circle-1 {
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(81, 113, 242, 0.1) 0%, rgba(81, 113, 242, 0) 70%);
        top: -100px;
        right: 10%;
        animation: float 15s ease-in-out infinite alternate;
      }
      
      &.circle-2 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, rgba(66, 185, 245, 0.1) 0%, rgba(66, 185, 245, 0) 70%);
        bottom: -200px;
        left: -100px;
        animation: float 20s ease-in-out infinite alternate-reverse;
      }
      
      &.circle-3 {
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(100, 215, 214, 0.1) 0%, rgba(100, 215, 214, 0) 70%);
        bottom: 10%;
        right: 5%;
        animation: float 18s ease-in-out infinite alternate;
      }
    }
  }
  
  // 顶部导航栏
  .header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    height: 80px;
    z-index: 10;
    
    .header-logo {
      display: flex;
      align-items: center;
      font-size: 30px;
      color: #5171f2;
      position: relative;
      transition: all 0.3s ease;
      
      &:hover {
        transform: scale(1.05);
        
        &:after {
          transform: scaleX(1);
        }
      }
      
      &:after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(90deg, #5171f2 0%, #42b9f5 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease;
      }
      
      .sitename {
        margin-left: 10px;
        font-size: 28px;
        font-weight: 700;
        background: linear-gradient(to right, #5171f2, #42b9f5);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    
    .back-btn {
      cursor: pointer;
      display: flex;
      align-items: center;
      color: #5171f2;
      font-size: 16px;
      padding: 8px 16px;
      border-radius: 20px;
      background-color: rgba(255, 255, 255, 0.8);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
      
      &:hover {
        background-color: rgba(81, 113, 242, 0.1);
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
        
        .btn-arrow {
          transform: translateX(-4px);
        }
      }
      
      .btn-arrow {
        display: inline-flex;
        margin-left: 8px;
        transition: transform 0.3s ease;
      }
    }
  }
  
  // 主容器
  .main-container {
    display: flex;
    width: 200%;
    height: calc(100% - 80px);
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 5;
    
    &.slide-left {
      transform: translateX(-50%);
    }
  }
  
  // 首页部分
  .home-section {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    .content-wrapper {
      max-width: 700px;
      text-align: center;
      padding: 0 20px;
      animation: fadeInUp 1.2s ease-out;
      position: relative;
      
      .title {
        font-size: 56px;
        margin-bottom: 24px;
        font-weight: 700;
        background: linear-gradient(to right, #5171f2, #42b9f5);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        
        &:after {
          content: "";
          position: absolute;
          bottom: -10px;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 3px;
          background: linear-gradient(to right, #5171f2, #42b9f5);
          border-radius: 3px;
        }
      }
      
      .slogan {
        font-size: 20px;
        color: #555;
        margin-bottom: 60px;
        line-height: 1.6;
        animation: fadeIn 1.5s ease-out;
        animation-delay: 0.3s;
        animation-fill-mode: both;
      }
      
      .button-group {
        display: flex;
        justify-content: center;
        gap: 30px;
        animation: fadeIn 1.5s ease-out;
        animation-delay: 0.6s;
        animation-fill-mode: both;
        
        .btn-primary {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          width: 150px;
          height: 50px;
          font-size: 18px;
          font-weight: 600;
          box-shadow: 0 10px 20px rgba(81, 113, 242, 0.25);
          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
          overflow: hidden;
          position: relative;
          
          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(81, 113, 242, 0.3);
            
            .btn-icon {
              transform: translateX(3px);
            }
            
            &:before {
              transform: scale(10);
              opacity: 0;
            }
          }
          
          &:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            transition: transform 0.8s, opacity 0.8s;
            opacity: 1;
          }
          
          .btn-text {
            position: relative;
            z-index: 2;
          }
          
          .btn-icon {
            display: inline-flex;
            transition: transform 0.3s ease;
            position: relative;
            z-index: 2;
          }
          
          &.login-btn {
            background: linear-gradient(135deg, #5171f2, #4260d9);
            
            &:hover {
              background: linear-gradient(135deg, #4260d9, #354bb8);
            }
          }
          
          &.register-btn {
            background: linear-gradient(135deg, #42b9f5, #339cd4);
            
            &:hover {
              background: linear-gradient(135deg, #339cd4, #2483b8);
            }
          }
        }
      }
      
      // 波浪装饰
      .wave-container {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -150px;
        height: 150px;
        overflow: hidden;
        
        .wave {
          position: absolute;
          left: 0;
          width: 100%;
          height: 100px;
          background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg"><path fill="%23e6f7ff" fill-opacity="0.7" d="M0,160L60,170.7C120,181,240,203,360,202.7C480,203,600,181,720,165.3C840,149,960,139,1080,149.3C1200,160,1320,192,1380,208L1440,224L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>');
          background-size: 100% 100%;
          
          &.wave1 {
            bottom: 0;
            opacity: 0.7;
            animation: wave 20s linear infinite;
          }
          
          &.wave2 {
            bottom: 10px;
            opacity: 0.5;
            animation: wave 15s linear infinite reverse;
          }
        }
      }
    }
  }
  
  // 登录注册部分
  .auth-section {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .auth-container {
      width: 420px;
      transition: opacity 0.4s ease;
      
      &.fade-out {
        opacity: 0;
      }
    }
    
    .auth-form {
      background-color: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
      padding: 40px;
      animation: slideUp 0.7s cubic-bezier(0.23, 1, 0.32, 1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      position: relative;
      overflow: hidden;
      
      &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;
        background: linear-gradient(to right, #5171f2, #42b9f5);
      }
      
      .form-header {
        text-align: center;
        margin-bottom: 30px;
        
        .form-title {
          color: #333;
          margin-bottom: 10px;
          font-size: 28px;
          font-weight: 700;
        }
        
        .form-subtitle {
          color: #666;
          font-size: 15px;
        }
      }
      
      .form-content {
        margin-bottom: 20px;
        
        .input-group {
          margin-bottom: 16px;
          
          .input-label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #555;
            font-weight: 500;
          }
          
          .el-form-item {
            margin-bottom: 5px;
            
            :deep(.el-input__wrapper) {
              border-radius: 10px;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
              transition: all 0.3s ease;
              
              &:hover, &.is-focus {
                box-shadow: 0 2px 12px rgba(81, 113, 242, 0.15);
              }
              
              &.is-focus {
                border-color: #5171f2;
              }
              
              .el-input__inner {
                height: 44px;
              }
              
              .el-input__prefix {
                color: #888;
              }
            }
          }
          
          .code-input {
            display: flex;
            gap: 10px;
            
            .el-input {
              flex-grow: 1;
            }
            
            .code-btn {
              min-width: 110px;
              border-radius: 10px;
              transition: all 0.3s ease;
              
              &.counting {
                background-color: #f5f7fa;
                color: #909399;
              }
            }
          }
        }
      }
      
      .submit-btn {
        width: 100%;
        height: 48px;
        font-size: 16px;
        font-weight: 600;
        margin-top: 20px;
        background: linear-gradient(135deg, #5171f2, #42b9f5);
        border: none;
        box-shadow: 0 8px 15px rgba(81, 113, 242, 0.25);
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 12px 20px rgba(81, 113, 242, 0.3);
          background: linear-gradient(135deg, #4260d9, #339cd4);
        }
        
        &:active {
          transform: translateY(-1px);
        }
      }
    }
    
    .form-actions {
      margin-top: 25px;
      display: flex;
      flex-direction: column;
      gap: 15px;
      
      .login-method,
      .switch-auth {
        color: #5171f2;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        
        &:hover {
          color: #42b9f5;
          
          .action-arrow {
            transform: translateX(3px);
          }
        }
        
        span {
          font-weight: 600;
        }
        
        .action-icon,
        .action-arrow {
          display: inline-flex;
          transition: transform 0.3s ease;
        }
      }
    }
  }
}

// 动画
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wave {
  0% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(50%) scale(1.2); }
  100% { transform: translateX(-50%) scale(1); }
}

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(20px); }
  100% { transform: translateY(0px); }
}
</style>